﻿@model Masuit.MyBlogs.Core.Models.Entity.Post

@{
	Layout = null;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章《@Model.Title》洞察分析</title>
	<meta content="webkit" name="renderer">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
	<link href="/Assets/layui/css/layui.min.css" media="all" rel="stylesheet">
	<style>
		.mp-results.mp-bottomleft {
			top: unset !important;
			bottom: 0;
		}
	</style>
</head>
<body style="overflow-x: hidden">
	<h3 align="center">文章《@Model.Title》洞察分析</h3>
	<div class="searchTable">
		<div class="layui-inline">
			<input class="layui-input" name="kw" id="kw">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<a class="layui-btn" asp-controller="Post" asp-action="ExportPostVisitRecords" asp-route-id="@Model.Id">导出</a>
	</div>
	<table class="layui-hide" id="table" lay-filter="tableEvent"></table>
	<div id="chart" style="height: 500px"></div>
	<mini-profiler max-traces="5" />
</body>
</html>
<script src="/Assets/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js" type="text/javascript"></script>
<script>
	layui.use('table', function() {
		var table = layui.table;
		table.render({
			elem: '#table',
			url: '/@Model.Id/records',
			cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			cols: [
				[
					{ field: 'IP', title: 'IP', align: 'center', event: 'tool-ip', width:320 },
					{ field: 'Location', title: '位置和网络', align: 'center'},
					{ field: 'RequestUrl', title: '请求URL', align: 'center' },
					{ field: 'Referer', title: '页面来源', align: 'center', event: 'visit' },
					{ field: 'Time', title: '访问时间', align: 'center',width:180 }
				]
			],
			page: true,
			limit:20,
			request: {
				limitName: 'size' //每页数据量的参数名，默认：limit
			},
			parseData: function(res) { //res 即为原始返回的数据
				return {
					"code": res.TotalCount > 0 ? 0 : 1, //解析接口状态
					"msg": "暂无数据", //解析提示文本
					"count": res.TotalCount, //解析数据长度
					"data": res.Data //解析数据列表
				};
			}
		});
		table.on('tool(tableEvent)', function(obj){
			var data = obj.data;
			if(obj.event === 'tool-ip'){
				window.open("/tools/ip/"+data.IP);
			}

			if(obj.event === 'visit'){
				window.open(data.Referer);
			}
		});

		var $ = layui.$;
		$('.searchTable .layui-btn').on('click', function () {
			table.reload('table', {
				page: {
					curr: 1
				},
				where: {
					kw: $('#kw').val()
				}
			});
		});
	});
	window.fetch("/@Model.Id/records-chart", {
		credentials: 'include',
		method: 'GET',
		mode: 'cors'
	}).then(function(response) {
		return response.json();
	}).then(function(res) {
		var data = [];
		for (let item of res) {
			data.push([Date.parse(item.Date), item.Count]);
		}
		var chartDom = document.getElementById('chart');
		var myChart = echarts.init(chartDom);
		var option = {
			tooltip: {
				trigger: 'axis',
				position: function(pt) {
					return [pt[0], '10%'];
				}
			},
			title: {
				left: 'center',
				text: '最近90天访问趋势，日均：' + (res.reduce((acr, cur) => acr + cur.Count, 0) / (new Date() - new Date(res[0].Date)) * (1000 * 60 * 60 * 24)).toFixed(2)
			},
			xAxis: {
				type: 'time',
				axisLabel: {
					formatter:function (value){
						var dt=new Date(value);
						return dt.toLocaleDateString();
					}
				}
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name: '访问量',
					type: 'line',
					smooth: true,
					symbol: 'none',
					areaStyle: {},
					data: data,
					markPoint: {
						data: [
							{ type: 'max', name: '最大值' },
							{ type: 'min', name: '最小值' }
						]
					},
					markLine: {
						data: [
							{ type: 'average', name: '平均值' }
						]
					}
				}
			]
		};
		myChart.setOption(option);
	});
</script>
